import { on, off, renderThumbStyle, BAR_MAP } from './utils'

/* istanbul ignore next */
export default {
    name: 'Bar',

    props: {
        vertical: Boolean,
        size: String,
        move: Number
    },

    computed: {
        bar() {
            return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
        },

        wrap() {
            return this.$parent.wrap
        }
    },

    render(h) {
        const { size, move, bar } = this

        return (
            <div class={['lcy-scrollbar__bar', 'is-' + bar.key]} onMousedown={this.clickTrackHandler}>
                <div ref="thumb" class="lcy-scrollbar__thumb" onMousedown={this.clickThumbHandler} style={renderThumbStyle({ size, move, bar })}></div>
            </div>
        )
    },

    methods: {
        clickThumbHandler(e) {
            // prevent click event of right button
            if (e.ctrlKey || e.button === 2) {
                return
            }
            this.startDrag(e)
            this[this.bar.axis] =
                e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction])
        },

        clickTrackHandler(e) {
            const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client])
            const thumbHalf = this.$refs.thumb[this.bar.offset] / 2
            const thumbPositionPercentage = ((offset - thumbHalf) * 100) / this.$el[this.bar.offset]

            this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100
        },

        startDrag(e) {
            e.stopImmediatePropagation()
            this.cursorDown = true

            on(document, 'mousemove', this.mouseMoveDocumentHandler)
            on(document, 'mouseup', this.mouseUpDocumentHandler)
            document.onselectstart = () => false
        },

        mouseMoveDocumentHandler(e) {
            if (this.cursorDown === false) return
            const prevPage = this[this.bar.axis]

            if (!prevPage) return

            const offset = (this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1
            const thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage
            const thumbPositionPercentage = ((offset - thumbClickPosition) * 100) / this.$el[this.bar.offset]

            this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100
        },

        mouseUpDocumentHandler(e) {
            this.cursorDown = false
            this[this.bar.axis] = 0
            off(document, 'mousemove', this.mouseMoveDocumentHandler)
            document.onselectstart = null
        }
    },

    destroyed() {
        off(document, 'mouseup', this.mouseUpDocumentHandler)
    }
}
